<template>
  <div class="style-container">
    <!-- 样式 -->
    <div class="style-setting">
      <div class="shadow-container">
        <div class="shadow-item" style="align-items: left;" @click="handleShadow()">
          <img v-if="!shadow" class="shadow-item-icon" src="@/assets/images/text/ic_wb_yy1.png" alt="">
          <img v-else class="shadow-item-icon" src="@/assets/images/text/ic_wb_yy2.png" alt="">
          <div class="shadow-item-name">阴影</div>
        </div>
        <div class="shadow-item" @click="handleFontWeight()">
          <img v-if="fontWeight === 'normal'" class="shadow-item-icon" src="@/assets/images/text/ic_wb_jc1.png" alt="">
          <img v-else class="shadow-item-icon" src="@/assets/images/text/ic_wb_jc2.png" alt="">
          <div class="shadow-item-name">加粗</div>
        </div>
      </div>
      <div class="shadow-container" style="justify-content: space-between;">
        <div class="shadow-item" @click="handleTextAlign('left')">
          <img v-if="textAlign !== 'left'" class="shadow-item-icon" src="@/assets/images/text/ic_wb_zdq1.png" alt="">
          <img v-else class="shadow-item-icon" src="@/assets/images/text/ic_wb_zdq2.png" alt="">
          <div class="shadow-item-name">左对齐</div>
        </div>
        <div class="shadow-item" @click="handleTextAlign('center')">
          <img v-if="textAlign !== 'center'" class="shadow-item-icon" src="@/assets/images/text/ic_wb_jz1.png" alt="">
          <img v-else class="shadow-item-icon" src="@/assets/images/text/ic_wb_jz2.png" alt="">
          <div class="shadow-item-name">居中</div>
        </div>
        <div class="shadow-item" @click="handleTextAlign('right')">
          <img v-if="textAlign !== 'right'" class="shadow-item-icon" src="@/assets/images/text/ic_wb_ydq1.png" alt="">
          <img v-else class="shadow-item-icon" src="@/assets/images/text/ic_wb_ydq12.png" alt="">
          <div class="shadow-item-name">右对齐</div>
        </div>
      </div>
    </div>

    <!-- 阴影颜色 -->
    <div v-if="shadow" class="color-container">

      <!-- 阴影宽度选择 -->
      <div class="slider-container">
        <img class="filter-icon" src="@/assets/images/text/edit_toumingdu.png" alt="">
        <div>
          <span class="filter-text">模糊度：</span>
          <span class="filter-num">{{ shadowWidthValue / 10 }}</span>
        </div>
        <div class="slider-content">
          <van-slider v-model="shadowWidthValue" step="5" @input="changeShadowValue" @drag-end="changeShadowWidtValueEnd" bar-height="4px" active-color="#AAB9E3" />
        </div>
      </div>
      <!-- 阴影宽度选择 -->

      <!-- 颜色选择 -->
      <div class="color-box-container">
        <div class="color-box" :style="{
          backgroundColor: shadowColor
        }"></div>
        <van-field v-model="shadowColor" label-width="0" class="color-input-container" placeholder="请输入颜色值" />
      </div>
      <div class="select-color-container">
        <div class="select-color-content">
          <span
          v-for="item in colorList.Content.list"
          :key="item.id"
          :style="{
            backgroundColor: item.value,
            border: item.value === '#ffffff' ? '2px solid #eaeaea' : `2px solid ${item.value}`
          }"
          :class="{
            'active-color': item.value === shadowColor
          }"
          class="color-block"
          @click="changeShadowColor(item.value)"></span>
        </div>
      </div>
      <div class="selection-tip">可左右滑动选择颜色</div>
      <!-- 颜色选择 -->
    </div>

    <!-- 间距 -->
    <div class="space-container">
      <div class="space-setting">
        <img class="shadow-item-icon" src="@/assets/images/text/ic_wb_hj.png" alt="">
        <span class="shadow-item-name">行距</span>
        <div class="operation-item">
          <div class="operation-num">
            <div class="operation-icon-container" @click="decreaseLineHeight">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_decrease.png" alt="">
            </div>
            <div class="operation-icon-container operation-text">
              <span class="font-size-num">{{ lineHeight === 1 ? '1.0' : parseFloat(lineHeight).toFixed(1) }}X</span>
            </div>
            <div class="operation-icon-container" @click="increaseLineHeight">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_increase.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="space-setting" style="justify-content: flex-end;">
        <img class="shadow-item-icon" src="@/assets/images/text/ic_wb_zj.png" alt="">
        <span class="shadow-item-name">字距</span>
        <div class="operation-item">
          <div class="operation-num">
            <div class="operation-icon-container" @click="decreaseCharSpacing">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_decrease.png" alt="">
            </div>
            <div class="operation-icon-container operation-text">
              <span class="font-size-num">{{ parseFloat(charSpacing / 100).toFixed(1) }}X</span>
            </div>
            <div class="operation-icon-container" @click="increaseCharSpacing">
              <img class="operation-item-icon" src="@/assets/images/text/ic_btn_increase.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import colorListData from '../../lib/color'
export default {
  data() {
    return {
      textAlign: 'left',
      shadow: null,
      fontWeight: 'normal',
      lineHeight: 1.0,
      charSpacing: 0,
      colorList: colorListData,
      shadowColor: '',
      shadowWidthValue: 0
    }
  },

  watch: {
    '$store.state.design.currentSelectionElement': {
      immediate: true,
      handler(val, oldVal) {
        if (val && val.type === 'textbox') {
          this.textAlign = val.textAlign;
          this.shadow = val.shadow;
          this.fontWeight = val.fontWeight;
          this.lineHeight = val.lineHeight;
          this.charSpacing = val.charSpacing;
          this.shadowColor = val.shadow ? val.shadow.color : '',
          this.shadowWidthValue = val.shadow ? val.shadow.blur * 5 : 0
        }
      } 
    },
    shadowColor: {
      handler(val, oldVal) {
        if (val) {
          this.handAccountCanvas.updateTextBox({
            type: 'shadow',
            content: `${this.shadowColor} 0.8 0.8 ${(this.shadowWidthValue / 5 || 0)}`
          });
        } else {
          this.handAccountCanvas.updateTextBox({
            type: 'shadow',
            content: null
          });
        }
      } 
    }
  },

  methods: {

    // 改变描边宽度
    changeShadowValue(val) {
      this.shadowWidthValue = val;
      this.handAccountCanvas.updateTextBox({
        type: 'shadow',
        content: `${this.shadowColor} 0.8 0.8 ${val / 5}`
      });
    },

    // 改变描边宽度结束
    changeShadowWidtValueEnd() {
      this.handAccountCanvas.updateTextBox({
        type: 'shadow',
        content: `${this.shadowColor} 0.8 0.8 ${this.shadowWidthValue / 5}`
      });
    },


    // 设置对齐方式
    handleTextAlign(textAlign) {
      this.textAlign = textAlign;
      this.handAccountCanvas.updateTextBox({
        type: 'textAlign',
        content: textAlign
      })
    },

    // 改变字体颜色
    changeShadowColor(val) {
      this.shadowColor = val;
    },

    // 设置阴影
    handleShadow() {
      // const currentElement = this.$store.state.design.currentSelectionElement;
      let shadowColor = this.shadowColor;
      if (!shadowColor) {
        this.shadowColor = '#000000';
        this.shadow = `${this.shadowColor} 1 1 1`;
      } else {
        this.shadow = null;
        this.shadowColor = null;
      }
    },

    // 字体是否加粗
    handleFontWeight() {
      const currentElement = this.$store.state.design.currentSelectionElement;
      if (currentElement.fontWeight === 'normal') {
        this.handAccountCanvas.updateTextBox({
          type: 'fontWeight',
          content: 'bold'
        });
        this.fontWeight = 'bold';
      } else {
        this.handAccountCanvas.updateTextBox({
          type: 'fontWeight',
          content: 'normal'
        });
        this.fontWeight = 'normal';
      }
    },

    // 减小行间距
    decreaseLineHeight() {
      let lineHeight = this.lineHeight -= 0.1;
      if (lineHeight > 0.8) {
        this.handAccountCanvas.updateTextBox({
          type: 'lineHeight',
          content: lineHeight
        }).then(() => {
          this.lineHeight = lineHeight;
        })
      } else {
        this.lineHeight = 0.8;
        this.$toast({
          message: '已经是最小行间距了',
          position: 'center'
        });
      }
    },

    // 增大行间距
    increaseLineHeight() {
      let lineHeight = this.lineHeight += 0.1;
      if (lineHeight <= 1.8) {
          this.handAccountCanvas.updateTextBox({
          type: 'lineHeight',
          content: lineHeight
        }).then(() => {
          this.lineHeight = lineHeight;
        })
      } else {
        this.lineHeight = 1.8;
        this.$toast({
          message: '已经是最大行间距了',
          position: 'center'
        });
      }
    },

    // 减小字间距
    decreaseCharSpacing() {
      let charSpacing = this.charSpacing -= 20;
      if (charSpacing >= 0) {
        this.handAccountCanvas.updateTextBox({
          type: 'charSpacing',
          content: charSpacing
        }).then(() => {
          this.charSpacing = charSpacing;
        })
      } else {
        this.charSpacing = 0;
        this.$toast({
          message: '已经是最小行间距了',
          position: 'center'
        });
      }
    },

    // 增大字间距
    increaseCharSpacing() {
      let charSpacing = this.charSpacing += 20;
      if (charSpacing <= 800) {
          this.handAccountCanvas.updateTextBox({
          type: 'charSpacing',
          content: charSpacing
        }).then(() => {
          this.charSpacing = charSpacing;
        })
      } else {
        this.charSpacing = 800;
        this.$toast({
          message: '已经是最大行间距了',
          position: 'center'
        });
      }
    }

  }
}
</script>

<style lang="less" scoped>
  .style-container{
    min-height: 150px;
    overflow: hidden;
    padding: 0 18px;

    .style-setting{
      display: flex;
      height: 70px;
      align-items: center;

      .shadow-container{
        flex: 1;
        display: flex;

        .shadow-item-icon{
          width: 25px;
          height: 25px;
          display: inline-block;
        }

        .shadow-item{
          // width: 33.333333%;
          margin-right: 20px;
          text-align: center;
        }

        .shadow-item-name{
          color: #888;
          font-size: 12px;
        }
      }
    }

    .space-container{
      display: flex;
      height: 60px;
      align-items: center;

      .space-setting{
        flex: 1;
        display: flex;
        align-items: center;

        .shadow-item-icon{
          width: 25px;
          height: 25px;
          display: inline-block;
        }

        .shadow-item-name{
          color: #888;
          margin-left: 5px;
        }
      }

      .operation-item{

        .operation-item-icon{
          width: 24px;
          height: 24px;
          float: left;
        }

        .clear-btn{
          display: inline-block;
          text-align: center;
          font-weight: bold;
          height: 20px;
          width: 48px;
          font-size: 12px;
          line-height: 20px;
          border-radius: 11px;
          border: 2px solid #8da6ef;
          color: #8da6ef;
          background: #D6DFEB;
        }

        .operation-num{
          background: #D6DFEB;
          margin-left: 5px;
          width: 80px;
          height: 30px;
          flex: 1;
          border-radius: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 6px;

          .operation-item-icon{
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }

          .font-size-num{
            font-weight: bold;
          }

          .operation-icon-container{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
          }

          .operation-text{
            width: 40px;
          }
        }
      }
    }
  }

  .color-container{
    // min-height: 150px;
    overflow: hidden;
    padding: 0 12px 12px 12px;
    background-color: #666;
    border-radius: 6px;

    .color-warp{
      padding: 18px;
      background-color: #333;
    }

    .color-box-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .color-box{
        width: 36px;
        height: 36px;
        border: 2px solid #fff;
        border-radius: 4px;
      }

      .color-input-container{
        margin-left: 12px;
        border-radius: 4px;
        padding: 8px 10px;
        flex: 1;
      }
    }

    .slider-warp{
      padding: 18px;
      background-color: #666;
    }

    .slider-container{
      display: flex;
      height: 30px;
      align-items: center;
      color: #AAB9E3;

      .filter-icon{
        width: 15px;
        height: 15px;
      }

      .filter-text{
        margin-left: 15px;
        font-size: 12px;
      }

      .filter-num{
        display: inline-block;
        font-size: 12px;
        width: 40px;
      }

      .slider-content{
        flex: 1;
        padding-right: 24px;
      }
    }

    .select-color-container{
      overflow-x: auto;
      overflow-y: hidden;
      padding-top: 10px;
      // display: flex;
      // flex-wrap: wrap;

      .select-color-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 690vw;
        height: 38px;
      }

      .color-block{
        min-width: 22px;
        max-height: 22px;
        height: 22px;
        padding: 2px;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 50%;
      }

      .active-color{
        background-clip: content-box;
      }
    }

    .selection-tip{
      text-align: center;
      font-size: 12px;
      color: #f8f8f8;
    }
  }
</style>
